<template>
  <div class="default-main ba-table-box">
    <TableHeader
      :buttons="['refresh', 'comSearch', 'columnDisplay']"
      @action="baTable.onTableHeaderAction"
    />
    <Table ref="tableRef" @action="baTable.onTableAction" />
  </div>
</template>

<script setup lang="ts">
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import baTableClass from "@/utils/baTable";
import { baTableApi, operatorShowOff } from "@/utils/common";
import type { TableRow, TableColumn } from "@/utils/baTable";
import { useDeviceWarnSet } from "@/store/backend/DeviceM/warnSet";
import { ref, reactive, provide, onMounted, markRaw } from "vue";
import { DeviceMAccess } from "@/api/backend/index";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useRegion } from "@/store/backend/SysM/region";
import { useRoute } from "vue-router";
import TagState from "@/components/dictTagState/index.vue";
import TagSearch from "@/components/tagSearch/index.vue";
import { useDictionary } from "@/store/backend/tool/dictionary";
import { getDictData } from "@/utils/common";

interface Props {
  configGroup: any;
}
const tableRef = ref();
const warnSet = useDeviceWarnSet();
const { proxy } = useCurrentInstance(); //全局事件总线
const region = useRegion();
const route = useRoute();
const dictionary = useDictionary();

const baTable = new baTableClass(
  new baTableApi(DeviceMAccess), //this.api = api菜单管理相关
  {
    pk: "id", //设备id
    column: [
      // { type: "selection", align: "center", operator: false },
      { label: "ID", prop: "id", align: "center", width: 50, operator: false },
      { label: "设备编号", prop: "code", align: "center" },
      { label: "设备名称", prop: "name", align: "center" },
      // {
      //   label: "状态",
      //   prop: "state",
      //   align: "center",
      //   render: "tag",
      //   custom: { 0: "success", 1: "info", 2: "warning", 3: "danger" },
      //   replaceValue: {
      //     0: "在线",
      //     1: "离线",
      //     2: "未激活",
      //     3: "已退回",
      //   },
      //   operator: false,
      // },
      {
        label: "设备状态",
        prop: "state",
        align: "center",
        width: "90",
        render: "customRender",
        customRender: markRaw(TagState),
        comSearchRender: "customRender",
        comSearchCustomRender: markRaw(TagSearch),
      },
      // {
      //   label: "设备状态",
      //   prop: "openState",
      //   align: "center",
      //   render: "switch",
      //   replaceValue: {
      //     0: "收回",
      //     1: "激活",
      //   },
      //   operator: false,
      // },
      {
        show: operatorShowOff([route.path + "/edit"]),
        label: "操作",
        align: "center",
        render: "buttons",
        fixed: "right",
        buttons: [
          {
            render: "tipButton",
            name: "warnSet", //绑定了edit
            title: "告警配置详情",
            text: "",
            type: "primary",
            icon: "fa fa-gear",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return false;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
        operator: false,
      },
    ],
    filter: {
      regions: region.regionIds + "",
    },
  },
  {
    defaultItems: {},
  }
);
const emit = defineEmits(["on-showWarnList"]);
//获取设备的告警配置列表信息
const deviceWarnSet = (name: string, row: anyObj) => {
  //将row数据传递给告警配置类表表单
  emit("on-showWarnList", row);
  warnSet.$state.id = row.id;
  proxy.eventBus.emit("changeWarnId", row.id);
};

//获取菜单状态的字典
const getMenuStatus = () => {
  dictionary.getDictInfo("device_online_status").then((res: any) => {
    // state.statusDict = getDictData(res);
    dictionary.tag = getDictData(res);
    console.log("获取菜单状态的字典", dictionary.tag);
  });
};
getMenuStatus();

onMounted(() => {
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  //   console.log("tableRef.value", tableRef.value);
  baTable.mount();
  baTable.getList(DeviceMAccess);

  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  proxy.eventBus.on(
    "onTableButtonClick",
    (data: { name: string; row: TableRow }) => {
      if (!baTable.activate) return;
      //点击获取该设备的告警列表
      if (data.name == "warnSet") {
        deviceWarnSet(data.name, data.row);
      }
    }
  );
});

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
provide("dictionary", dictionary);
</script>

<style scoped lang="scss">
.add-item-content {
  display: none;
}
</style>
